import React,{useState} from "react";
import { Button, Modal,Form,Input, message,Select} from "antd";

const FormItem = Form.Item;

const { TextArea } = Input;
const { Option } = Select;

const updateBizType = (props) =>{
    const {
        onSubmit:handleUpdate,
        onCanel:handleUpdateModalVisibel,
        updateModalVisible
    }=props;

    const [fromVals,setFormVals]=useState({
        name:props.values.name,
        descs:props.values.descs,
        channelCode:props.values.channelCode,
        channelType:props.values.channelType,
        id:props.values.id
    })

    const formLayout = {
        labelCol: {
            span: 7
        },
        wrapperCol: {
            span: 13
        }
    }

    const [form] = Form.useForm();

    const handleSubmit = async ()=>{
        try{
            const fieldVlas = await form.validateFields();
            setFormVals({ ...fromVals, ...fieldVlas });
            handleUpdate({...fromVals,...fieldVlas})
        }catch(error){
            message.error("配置失败");
        }
    }


    return (
        <Modal
          title="配置售卖渠道"
          width={740}
          destroyOnClose
          visible={updateModalVisible}
          footer={[
            <Button key="cancel" onClick={()=>{
                handleUpdateModalVisibel(false)
            }}>取消</Button>,
            <Button key="submit" type="primary" onClick={()=>{
                handleSubmit();
            }}>提交</Button>
        ]}
          onCancel={()=>{
              handleUpdateModalVisibel(false)
          }}
        >
            <Form
            {...formLayout}
            form={form}
            initialValues={
                {
                    name:fromVals.name,
                    descs:fromVals.descs,
                    channelType:fromVals.channelType,
                    channelCode:fromVals.channelCode
                }
            }
            >
                <FormItem
                  label="售卖渠道代码"
                  name="channelCode"
                  rules={
                      [
                          {
                              required:true,
                              message:"售卖渠道代码是必须项"
                          }
                      ]
                  }
                >
                    <Input placeholder="请输入售卖渠道代码"/>
                </FormItem>


                <FormItem
                  label="售卖渠道名称"
                  name="name"
                  rules={
                      [
                          {
                              required:true,
                              message:"售卖渠道名称是必须项"
                          }
                      ]
                  }
                >
                    <Input placeholder="请输入售卖渠道名称"/>
                </FormItem>
                <FormItem
                    label="渠道类型"
                    name="channelType"
                    rules={
                        [
                            {
                                required:true,
                                message:"渠道类型是必须项"
                            }
                        ]
                    }
                >
                    <Select>
                        <Option value={1}>支持</Option>
                        <Option value={2}>不支持</Option>
                    </Select>
                </FormItem>
            </Form>
        </Modal>
    )
}

export default updateBizType;